import type { TreeProps } from 'ant-design-vue';

export interface IDirTree {
    id?: string|number|any,
    title?: string|number|any,
    domId?: string|number|any,
    hLevel?: string|number|any,
    pid?: string|number|any,
    children?: Array<IDirTree>
}

interface IStack {
    id?:number,
    pid?:number,
    children?: Array<IStack>
    hLevel?:any
}
/**
 * 从HTML数据中提取内容目录树。
 *
 * @param htmlData HTML字符串，包含<h1-6>标题。
 * @returns 返回一个目录数组，其中标题标签添加了id属性。
 */
export const getContentDirTree: TreeProps['treeData']|Array<IDirTree>|any = (htmlData:string):Array<IDirTree> => {
    // 如果HTML数据为空，则直接返回空数组。
    if (!htmlData) {
        return [];
    }
    // 使用正则表达式匹配所有的<h1-6>标签。
    let hDomList:RegExpMatchArray|null = htmlData.match(
        /<h[1-6]{1}[^>]*>([\s\S]*?)<\/h[1-6]{1}>/g
    );
    // 若没有匹配的H标签则返回空数组
    if (!Array.isArray(hDomList)) {
        return [];
    }
    // 初始化根节点
    let stack: Array<IStack> = [{ id: 0, pid: 0, children: [] }];
    // 在原有函数中增加一个映射来存储标题内容与ID的关系
    let titleToIdMap: Record<string, string> = {};
    // 遍历所有匹配到的标题标签。
    hDomList.forEach((hDom:string, index:number):void => {
        // 提取标题的级别和内容。
        const startIndex:number = hDom.indexOf("<");
        const endIndex:number = hDom.indexOf(">");
        if (startIndex != -1 && endIndex != -1) {
            const re:RegExp = /<h([1-6]{1})[^>]*>([\s\S]*?)<\/h[1-6]{1}>/
            let hLevel:number = Number(hDom.replace(re, "$1"));
            let titleContent:any = hDom.replace(re, "$2");
            // 移除标题内容中的HTML标签。
            let title = titleContent.replaceAll(/<([\s\S]*?)>|<\/([\s\S]*?)>/g, "");
            // 为每个标题生成唯一的id。
            const id:string = `generatedId_${index}`; // 如果没有ID，则生成一个
            // 更新映射
            titleToIdMap[title] = id;
            // 当前标题的层级小于等于栈顶元素的层级时，出栈直到找到合适的父级或回到根节点
            while (stack.length > 1 && hLevel <= stack[stack.length - 1].hLevel) {
                stack.pop();
            }
            // 构建当前目录项，并将其添加到栈顶元素（即当前的父级）的children中
            const currentDir:IDirTree = {
                id,//用于点击的时候选中态
                title, // 标题
                domId: id, // 用于定位到标题
                hLevel, // 层级
                pid: stack[stack.length - 1].id,
                children: []
            }
            if(!stack[stack.length - 1].children){
                return
            }
            stack[stack.length - 1].children?.push(currentDir);
            stack.push(currentDir); // 将当前目录项压入栈作为新的父级候选
        }
    })
    // 最终的dirTree应为根节点的children
    const dirTree: Array<IDirTree>|undefined = stack[0].children;
    if (!dirTree){
        return []
    }
    // 为每个目录项添加子项
    dirTree.forEach((item:IDirTree):void => {
        if (item.pid !== 0) {
            const findParent = dirTree.find((i:any) => i.id === item.pid);
            if (findParent) {
                if (!Array.isArray(findParent.children)) {
                    findParent.children = []
                }
                findParent.children.push(item)
            }
        }
    })
    return  makeTree(dirTree.filter((item:any):boolean => item.pid === 0)) as any
    // 返回目录树
    // return  dirTree.filter((item:any):boolean => item.pid === 0) as any
}

const makeTree = (arr:IDirTree[]):TreeProps['treeData'] => {
    let treeData: TreeProps['treeData']=[]
    treeData =  arr.map(item=>{
        if (item?.children){
            return ({
                title: item.title,
                key: item.domId,
                children: makeTree(item.children)
            })
        }
        return ({
            title: item.title,
            key: item.domId,
            children: []
        })
    })
    return treeData
}